<template>
  <view>
    <scroll-view scroll-y="true" style="height: 100vh;" @scroll="onScroll">
      <view class="container">
        <view class="header-log" :style="{ 'paddingTop': `${paddingTop}px` }">
          <image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/logo2.png" mode='aspectFill' lazy-load='true' />
          <view @click="!userId ? $toast('您还未登录,请先去登录!') : $goPath(2, '/pages/premiumBag/mine/feedback')" style="margin-right: 24rpx;">反馈</view>
        </view>

        <view class="container-header" :style="{ 'paddingTop': `${paddingTop + 30}px` }">
          <view class="header-address">
            <view class="header-address_title"
              @click="!userId ? $toast('您还未登录,请先去登录!') : $goPath(2, '/pages/premiumBag/goods/storeChecked')">
              <u-icon name="map" size="40rpx" color="#999999" />
              <view>
                <text>{{ storeDTO.name }}</text>
                <text>距门店{{ storeDTO.distance }}</text>
              </view>
              <u-icon name="rewind-right" size="36rpx" color="#666" />
            </view>
            <view class="header-address_right">
              <view @click="openNavigation(longitude, latitude, locationaddress)">
                <u-icon name="map" size="40rpx" color="#999" />
                <text>查看地址</text>
              </view>
              <view @click="!userId ? $toast('您还未登录,请先去登录!') : $goPath(2, '/pages/premiumBag/goods/storeChecked')">
                <image src="/static/icon/store-icon.png" mode='aspectFill' />
                <text>切换门店</text>
              </view>
            </view>
          </view>
          <view class="header-search">
            <view style="width: 720rpx;" @click="$goPath(2, `/pages/premiumBag/goods/search?type=2&storeId=${storeId}`)">
              <u-search placeholder="请输入你想搜索的内容" :showAction="false"></u-search>
            </view>
          </view>
        </view>

        <view class="container-content">
          <!-- :style="{ 'paddingTop': `${paddingTop + 50}px` }" -->
          <view class="today-hot" v-if="favourableList.length > 0" >
            <view class="today-hot_title">今日特卖</view>
            <view class="today-hot_list">
              <view class="shopList" v-for="(item, index) in favourableList" :key="index"
                @click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}&type=2&storeId=${storeId}`)">
                <view class="hotShop-img">
                  <image :src="item.thumbnail" mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
                </view>
                <view class="today-price">
                  <text>特价</text>
                  <text>￥</text>
                  <text>{{ item.showPrice ? item.showPrice : 0 }}</text>
                  <text>{{ item.linePrice ? item.linePrice : 0 }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="selectd" :style="{ 'margin-top': `${isMore}` ? '20rpx' : '' }">
            <scroll-view scroll-y="true" style="height: 47vh;" class="selectd-left">
              <block v-for="(item, index) in select_title" :key="index">
                <view :class="select_title_id == item.id ? 'actived' : 'active'" @click="selectShops(item.id)">
                  {{ item.name }}
                </view>
              </block>
            </scroll-view>
            <view class="selectd-right">
              <block v-if="goodsList.length > 0">
                <scroll-view v-if="isMore" scroll-y="true" style="height: 47vh;" bindscrolltolower="onScrollReachBottom"
                  lower-threshold="300">
                  <block v-for="(item, index) in goodsList" :key="index">
                    <view class="selectd-right-item"
                      @click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}&type=2&storeId=${storeId}`)">
                      <view class="selectd-right-item-body">
                        <view class="selectd-right-item-imgs">
                          <image :src="item.thumbnail" mode="aspectFill" />
                        </view>
                        <view class="selectd-right-item_content">
                          <view class="selectd-right-item__upper">
                            <view class="selectd-right-item__title"> {{ item.name }} </view>
                          </view>
                          <view class="selectd-right-item__down">
                            <view>￥<text>{{ item.showPrice ? item.showPrice : 0 }}</text></view>
                            <view class="selectd-right-item__down_icon" @click.stop="onShopVisibleShow(item)">
                              <u-icon name="/static/icon/shoppingCart.png" size="30rpx" />
                            </view>
                          </view>
                        </view>
                      </view>
                      <view class="selectd-right-item_line"></view>
                    </view>
                  </block>
                </scroll-view>

                <block v-else>
                  <block v-for="(item, index) in goodsList" :key="index">
                    <view class="selectd-right-item"
                      @click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}&type=2&storeId=${storeId}`)">
                      <view class="selectd-right-item-body">
                        <view class="selectd-right-item-imgs">
                          <image :src="item.thumbnail" mode="aspectFill" />
                        </view>
                        <view class="selectd-right-item_content">
                          <view class="selectd-right-item__upper">
                            <view class="selectd-right-item__title"> {{ item.name }} </view>
                          </view>
                          <view class="selectd-right-item__down">
                            <view>￥<text>{{ item.showPrice ? item.showPrice : 0 }}</text></view>
                            <view class="selectd-right-item__down_icon" @click.stop="onShopVisibleShow(item)">
                              <u-icon name="/static/icon/shoppingCart.png" size="30rpx" />
                            </view>
                          </view>
                        </view>
                      </view>
                      <view class="selectd-right-item_line"></view>
                    </view>
                  </block>
                </block>

              </block>
              <view v-else class="no-goods">
                <u-empty icon="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/empty.png" description="暂无数据" />
              </view>
            </view>
          </view>
        </view>

        <view v-if="!shopVisible" class="container-btn">
          <view>
            <view class="contact-us" @click="onCall('4009915775')">
              <u-icon name="phone" size="30rpx" color="#fff" />
              <text>联系我们</text>
            </view>
            <view class="price-sum" @click="onShopSelectedVisible">
              <view class="btn-logo">
                <image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/self-pickup-logo.png" mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
                <u-badge v-if="cartList.length > 0" type="error" max="99" :value="cartList.length" shape="horn"
                  class="badge"></u-badge>
              </view>
              <view class="price-sum_content">
                <view class="total-price">
                  ￥<text>{{ totalPrice }}</text>
                </view>
                <view class="narration">
                  <text>到店自提</text>
                  <text>免费配送</text>
                </view>
              </view>
            </view>
            <view class="go-settlement" :class="cartList.length > 0 ? 'btnColor' : ''" @click="goConfirmOrder"> 去结算
            </view>
          </view>
        </view>
      </view>
    </scroll-view>


    <u-popup :show="shopVisible" @close="onShopVisibleHide">
      <view class="popup-block">
        <view class="popup-header">
          <u-icon name="close" size="50rpx" color="#333333" @click="onShopVisibleHide" />
        </view>
        <view class="popup-section">
          <view class="popup-section_img">
            <view>
              <image :src="product_id == -1 ? goodsItem.thumbnail : productList[product_index].specsImages"
                mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
            </view>
            <view class="popup-section_info">
              <view class="selectd-right-item__title">{{ goodsItem.name }}</view>
              <view class="popup-section_img_price">
                ￥<text>{{ product_id == -1 ? goodsItem.showPrice || 0 : productList[product_index].showPrice || 0
                }}</text>
              </view>
            </view>
          </view>
          <view class="popup-section_specs">
            <view class="popup-section_specs_title"> 规格 </view>
            <block v-for="(item, index) in productList" :key="index">
              <view v-if="item.stock > 0" class="popup-section_specs_item"
                :class="product_id == item.productSpecsId ? 'specs_actived' : ''" @click="onCheckProduct(item, index)">
                {{ item.name }}
              </view>
              <view v-else class="popup-section_specs_item noStock">
                {{ item.name }} <text>缺货</text>
              </view>
            </block>
            <view class="popup-section_specs_number">
              <view>数量</view>
              <view class="algorithm">
                <view @click="cartChange('plus', goodsItem)">
                  <u-icon name="plus" size="30rpx" color="#999" />
                </view>
                <view> {{ number }} </view>
                <view @click="cartChange('minus', goodsItem)">
                  <u-icon name="minus" size="30rpx" color="#32B499" />
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="popup_container-btn">
          <view @click="addCart(goodsItem)">加入购物车</view>
        </view>
      </view>
    </u-popup>

    <u-popup :show="selectedVisible" @close="onShopSelectedVisible">
      <view class="popup_selected_product">
        <view class="product-header">
          <view>已选商品</view>
          <view class="hader-delete" @click="clearCartList">
            <u-icon name="trash" size="33rpx" color="#333333" @click="onShopSelectedVisible" />
            <text>清空</text>
          </view>
        </view>
        <view class="product-section">
          <block v-for="(item, index) in cartList" :key="index">
            <view class="selectd-right product-section-item">
              <view class="selectd-right-item">
                <view class="selectd-right-item-body">
                  <view class="selectd-right-item-imgs"
                    @click="!userId ? $toast('您还未登录,请先去登录!') : $goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}&type=2&storeId=${storeId}`)">
                    <image :src="item.thumbnail" mode="aspectFill" />
                  </view>
                  <view class="selectd-right-item_content">
                    <view class="selectd-right-item__upper">
                      <view class="selectd-right-item__title">{{ item.name }}</view>
                    </view>
                    <view class="selectd-right-item__tag">
                      {{ item.productName }}
                    </view>
                    <view class="selectd-right-item__down">
                      <view>￥<text>{{ item.showPrice ? item.showPrice : 0 }}</text></view>
                      <view class="popup-section_specs_number">
                        <view class="algorithm">
                          <view>
                            <u-icon name="minus" size="30rpx" color="#999" @click="cartAddRemove('minus', item)" />
                          </view>
                          <view> {{ item.number }} </view>
                          <view>
                            <u-icon name="plus" size="30rpx" color="#32B499" @click="cartAddRemove('plus', item)" />
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="selectd-right-item_line"></view>
              </view>
            </view>
          </block>
        </view>
        <view class="popup_selected-btn popup_selected-btn2">
          <view class="container-btn">
            <view>
              <view class="contact-us" @click="onCall('4009915775')">
                <u-icon name="phone" size="30rpx" color="#fff" />
                <text>联系我们</text>
              </view>
              <view class="price-sum">
                <view class="btn-logo">
                  <image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/self-pickup-logo.png" mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
                  <u-badge v-if="cartList.length > 0" type="error" max="99" :value="cartList.length" shape="circle"
                    class="badge"></u-badge>
                </view>
                <view class="price-sum_content">
                  <view class="total-price">
                    ￥<text>{{ selectPrice }}</text>
                  </view>
                  <view class="narration">
                    <text>到店自提</text>
                    <text>免费配送</text>
                  </view>
                </view>
              </view>
              <view class="go-settlement" :class="cartList.length > 0 ? 'btnColor' : ''" @click="goConfirmOrder">
                去结算
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <tabbar :currentTab='1' :type="1" />

  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
import { arrayUnique } from '@/utils/util';

export default {
  data() {
    return {
      userId: getUserInfo().ypdUser?.userId,
      paddingTop: 0,
      list: [],
      select_title: [],
      select_title_id: 1,
      shopVisible: false,
      selectedVisible: false,
      storeDTO: {},
      favourableList: [],
      goodsList: [],
      pageCurrent: 1,
      goodsItem: {},
      productList: [], //规格列表
      select_title_id: -1, //已选分类
      product_id: -1, //已选择的规格
      product_index: 0, //已选规格下标
      number: 1, //数量
      stock: 0, //库存
      cartList: [], //已选择商品
      totalPrice: 0, //总价格
      selectPrice: 0,
      total: 0,
      isMore: false,
      latitude: '',
      longitude: '',
      locationaddress: ''
    }
  },
  onShow() {
    this.getlocation()
    this.getCartList();
  },
  onLoad() {
    const that = this
    //获取手机型号
    uni.getSystemInfo({
      success: function (res) {
        that.paddingTop = res.statusBarHeight//状态栏高度
      }
    });
    that.getAssortList();
    that.getStoreData()
  },
  methods: {
    onScroll(e) {
      if (e.detail.scrollTop >= 94) {
        this.isMore = true
      }
    },
    onScrollReachBottom() {
      const { goodsList, total, pageCurrent } = this;
      let current = pageCurrent;
      if (total > goodsList.length) {
        current++;
        this.pageCurrent = current
        this.getGoodsList();
      } else {
        this.$toast('暂无更多商品!')
      }
    },
    //获取门店信息
    async getStoreData() {
      const storeDTO = uni.getStorageSync('storeDTO') || {};
      if (storeDTO.distance < 1000) {
        storeDTO.distance = `${Number(storeDTO.distance).toFixed(1)}米`
      } else if (storeDTO.distance) {
        storeDTO.distance = `${(storeDTO.distance / 1000).toFixed(1)}千米`
      } else {
        storeDTO.distance = `0米`
      }
      // this.locationaddress = storeDTO.province + storeDTO.city + storeDTO.area + storeDTO.addressDetail
      this.storeDTO = storeDTO
      this.storeId = storeDTO.storeId || 0

      this.getFavourableList(storeDTO.storeId || 0);
      this.getGoodsList(storeDTO.storeId || 0)
    },
    //获取分类列表
    async getAssortList() {
      let result = await this.$request.miniAssortList()
      const obj = {
        id: -1,
        name: '全部商品'
      };
      result.data.unshift(obj);
      this.select_title = result.data
    },
    //今日特卖
    async getFavourableList(storeId) {
      const { userId } = this;
      const param = {
        page: { current: 1, size: 3, },
        query: { isFavourable: 1, userId, storeId, size: 3 }
      }
      let result = await this.$request.miniFindByPage(param)
      this.favourableList = result.data.records
    },
    //获取商品
    async getGoodsList() {
      const { select_title_id, pageCurrent, userId, storeId } = this;
      const param = {
        page: { current: pageCurrent, size: 20 },
        query: { assortId: select_title_id, userId, storeId, }
      }
      if (select_title_id == -1) delete param.query.assortId;
      uni.showLoading({ title: '加载中' });
      let result = await this.$request.miniFindByPage(param)
      const { records, total } = result.data;
      const { goodsList } = this;

      let newList = arrayUnique(Array.from(new Set([...goodsList, ...records])), 'id');
      this.goodsList = newList
      this.total = total
      uni.hideLoading();
      uni.setStorageSync('storeGoods', newList);
    },
    //联系我们
    onCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    },
    //选择规格弹出框
    onShopVisibleShow(item) {
      const { storeId } = this;
      item.number = 1;
      const param = { productId: item.id, storeId };
      this.$request.miniProductSpecs(param).then(res => {
        const { data } = res;
        this.shopVisible = true
        this.goodsItem = item
        this.productList = data
        this.number = 1
        this.product_id = data[0].productSpecsId
      });
    },
    // 选择规格弹窗关闭
    onShopVisibleHide() {
      this.shopVisible = false
      this.number = 1
    },
    //选择商品 加加减减
    cartChange(type, item) {
      let { number, goodsItem } = this;
      let num = number;
      if (goodsItem.id == item.id) {
        if (type == 'minus') {
          if (num > 1) {
            num--;
          }
        } else {
          num++
        };
        goodsItem.number = num;
        this.number = num
        this.goodsItem = goodsItem
      }
    },
    //选择规格
    onCheckProduct(item, index) {
      // this.product_id = product
      // this.product_index = index
      this.product_id = item.productSpecsId
      this.product_index = index
    },
    onShopSelectedVisible() {
      this.selectedVisible = !this.selectedVisible
    },
    //已选商品 加加减减
    cartAddRemove(type, item) {
      let { cartList, selectPrice } = this;
      let num = item.number;
      let price = selectPrice;
      cartList.map((ite, index) => {
        if (ite.id == item.id && ite.product_id == item.product_id) {
          if (type == 'minus') {
            if (num > 1) {
              num--;
              price = selectPrice - Number(ite.showPrice);
            } else {
              cartList.splice(index, 1)
            }
          } else {
            num++
            price = selectPrice + Number(ite.showPrice);
          }
          ite.number = num;
        }
      });

      let newCarList = [];
      newCarList = cartList.filter(function (i, index, self) {
        return self.findIndex(function (t) {
          return t.id == i.id && t.product_id == i.product_id
        }) == index;
      });

      uni.setStorageSync('cartList', newCarList);
      this.selectPrice = price
      this.totalPrice = price
      this.getCartList();
    },
    //加入购物车
    addCart(item) {
      const { cartList, totalPrice, product_id, productList, product_index } = this;
      let price = totalPrice;
      item.showPrice = productList[product_index].showPrice;
      item.productName = productList[product_index].name;
      item.product_id = product_id;
      item.thumbnail = productList[product_index].specsImages;

      price += Number(item.showPrice) * Number(item.number);
      if (product_id == -1) {
        // showToast('请选择规格');
        this.visible = true
      } else {
        if (cartList.length != 0) {
          cartList.map(ite => {
            if (ite.id == item.id && ite.product_id == item.product_id) {
              ite.number += item.number;
            } else {
              cartList.push(item);
            }
          });
        } else {
          cartList.push(item);
        };
        this.$toast('加入购物车成功!')

        let newCarList = [];
        newCarList = cartList.filter(function (i, index, self) {
          return self.findIndex(function (t) {
            return t.id == i.id && t.product_id == i.product_id
          }) == index;
        });

        uni.setStorageSync('cartList', newCarList);
        this.shopVisible = false
        this.totalPrice = parseFloat(price).toFixed(2)
        this.selectPrice = parseFloat(price).toFixed(2)
        this.product_id = -1
        this.getCartList();
      }
    },

    //清空已选商品
    clearCartList() {
      if (this.cartList.length > 0) {
        this.$toast('已清空!')
        uni.setStorageSync('cartList', []);
        this.shopVisible = false
        this.totalPrice = 0
        this.selectPrice = 0
        this.getCartList();
      } else {
        this.$toast('请先去挑选商品!')
      }
    },
    //选择分类
    selectShops(id) {
      this.select_title_id = id
      this.goodsList = []
      this.pageCurrent = 1
      this.getGoodsList();
    },

    //去结算
    goConfirmOrder() {
      const { cartList, selectPrice, storeDTO, product_id } = this;
      if (!this.userId) return this.$toast('您还未登录,请先去登录!')
      let message = '社区店';
      if (cartList.length == 0) {
        this.$toast('请选择商品!')
      } else {
        let checkedList = [];
        cartList.map(item => {
          let obj = { ...item, retailPrice: item.showPrice };
          checkedList.push(obj);
        });
        let str = encodeURIComponent(JSON.stringify(checkedList));
        uni.setStorageSync('checkedList', []);
        this.$goPath(2, `/pages/premiumBag/goods/confirmOrder?message=${message}&totalAmount=${selectPrice}&checkedList=${str}&storeDTO=${JSON.stringify(storeDTO)}`)
      }
    },

    //获取已选择的商品列表
    getCartList() {
      let cartList = uni.getStorageSync('cartList') || [];
      let sumPrice = 0;
      let newCarList = [];
      cartList.map(item => {
        sumPrice += Number(item.showPrice) * Number(item.number);
      });
      newCarList = cartList.filter(function (item, index, self) {
        return self.findIndex(function (t) {
          return t.id == item.id && t.product_id == item.product_id
        }) == index;
      });
      this.cartList = newCarList
      this.totalPrice = parseFloat(sumPrice).toFixed(2)
      this.selectPrice = parseFloat(sumPrice).toFixed(2)
    },
    // 获取地图定位
    getlocation() {
      var that = this
      uni.getLocation({
        type: 'gcj02', //国测局
        geocode: 'true',
        success: function (res) {
          // console.log('当前位置的经度：' + res.longitude);
          // console.log('当前位置的纬度：' + res.latitude);
          // console.log('当前位置：' + JSON.stringify(res));
          // 创建地图坐标对象
          var point = new plus.maps.Point(res.longitude, res.latitude);
          //静态方法，反向地理编码
          plus.maps.Map.reverseGeocode(point, {}, (event) => {
            var address = event.address; // 转换后的地理位置
            that.locationaddress = address // 重新赋值
          });
          // 赋值经纬度,从而得到当前位置
          that.latitude = res.latitude
          that.longitude = res.longitude
          uni.setStorageSync('latitude', that.latitude);
          uni.setStorageSync('longitude', that.longitude);
          that.getAssortList();
          that.getStoreData();
        },
        // 定位失败
        fail: function (err) {
          console.log(err)
        }
      })
    },
    //查看地址
    openNavigation() {
      // this.$goPath(2, '/pages/premiumBag/goods/storeMap')
      const { storeDTO } = this;
      uni.openLocation({
        latitude: storeDTO.lat,
        longitude: storeDTO.lon,
        scale: 8, // 缩放比例
        name: storeDTO.name,
        address: `${storeDTO.province}${storeDTO.city}${storeDTO.area}${storeDTO.addressDetail}`,
      });
    },
    // 导航 会打开导航菜单供用户选择
    openNavigations(longitude, latitude, name) {
      console.log(longitude, latitude, name)
      let url = ""; // app url
      let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
      // let qqmapkey = "Z3PBZ-XRM-OB66T-6TPXJ-XGPM6-ZDBY6"
      plus.nativeUI.actionSheet({ //选择菜单
        title: "选择地图应用",
        cancel: "取消",
        buttons: [{
          title: "高德地图"
        }] // 可选的地图类型
      }, (e) => {
        // 判断用户选择的地图
        switch (e.index) {
          //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
          case 1: //打开高德地图
            if (plus.os.name == "Android") { // 安卓
              url =
                `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
            } else { //苹果
              url =
                `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
            }
            webUrl =
              `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
            break;
        }
        // 如果选中
        if (url != "") {
          url = encodeURI(url);
          // console.log(url, '地址')
          // 打开 app 导航 
          plus.runtime.openURL(url, (err) => { // 失败回到
            // 毕竟用户可能没有安装app但一定安装的有浏览器						
            // 如果失败则说明未安装 直接 打开网页版进行导航
            let chooseMap = '高德地图'
            uni.showModal({
              title: '提示',
              content: '检测到您本机暂未安装' + chooseMap + '应用，请先去应用市场安装。',
              confirmText: '确定', //确定文本的文字
              cancelText: '取消', //确定文本的文字
              showCancel: false, //没有取消按钮的弹框
              success: function (res) {

              }
            })
          });
        }
      })
    }
  },
}
</script>
<style scoped>
page {
  min-height: none;
}

page view {
  box-sizing: border-box;
}

.container {
  height: 100%;
  background-color: #F6F6F6;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(219rpx + env(safe-area-inset-bottom));
}

.header-log {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background-color: #fff;
  z-index: 100;
  top: 0;
  padding-left: 24rpx;
  padding-bottom: 12rpx;
}

.header-log image {
  width: 220rpx;
  height: 60rpx;
  display: block;
}

.header-log>view {
  width: 120rpx;
  line-height: 60rpx;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  border: 1rpx solid #dbdbdb;
  color: #999;
  text-align: center;
}

.container-header {
  padding: 24rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.header-address,
.header-address view {
  display: flex;
  align-items: flex-start;
  font-size: 28rpx;
  color: #333;
}

.header-address {
  justify-content: space-between;
  margin: 20rpx 0;
}

.header-address_title {

  width: 350rpx;
}

.header-address_title>view {
  display: flex;
  flex-direction: column;
}

.header-address_right {
  flex: 1;
}

.header-address_right {
  justify-content: space-between;

}

.header-address_right>view {
  align-items: center !important;
}

.header-address_right>view image {
  width: 32rpx;
  height: 28rpx;
  display: block;
}

.header-address_right>view text {
  margin-left: 5rpx;
}

.header-search .t-search__input-container {
  border-radius: 32rpx !important;
  height: 64rpx !important;
}

.container-content {
  flex: 1;
  padding: 24rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.today-hot {
  background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/ccc8b911-83ff-443c-bee0-ee15b80a41b3.png');
  background-size: 100% 100%;
  border-radius: 16rpx 16rpx;
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  position: sticky;
  position: -webkit-sticky;
}

.today-hot_title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.today-hot_list {
  display: flex;
  justify-content: space-between;
}

.today-hot .shopList {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.today-hot_list image {
  width: 160rpx;
  height: 160rpx;
  display: block;
  border-radius: 10rpx 10rpx;
  margin-bottom: 10rpx;
}

.today-price {
  color: #EA5F5F;
}

.today-price>text:first-child {
  font-size: 24rpx;
}

.today-price>text:nth-child(2) {
  font-size: 28rpx;
}

.today-price>text:nth-child(3) {
  font-size: 36rpx;
  font-weight: bold;
}

.today-price>text:nth-child(4) {
  font-size: 20rpx;
  margin-left: 10rpx;
  text-decoration: line-through;
}

.selectd {
  flex: 1;
  display: flex;
  border-radius: 16rpx 16rpx;
  overflow-y: scroll;
}

.selectd-left {
  width: 190rpx;
  text-align: center;
  font-size: 30rpx;
  color: #666;
  position: relative;
  padding-bottom: calc(219rpx + env(safe-area-inset-bottom));
}

.actived {
  background-color: #fff;
  color: #32B499;
  line-height: 90rpx;
}

.active {
  background-color: #F6F6F6;
  color: #666666;
  line-height: 90rpx;
  border-radius: 20rpx 0 0 20rpx;
}

.selectd .selectd-right {
  flex: 1;
  /* overflow-y: scroll; */
  background-color: #fff;
  border-radius: 16rpx 16rpx;
  padding: 16rpx 0;
  padding-left: 16rpx;
  padding-bottom: 150rpx;
}

/* .selectd .selectd-right::-webkit-scrollbar {
  width: 0;
} */

.selectd-right-item_line {
  border: 2rpx solid rgba(241, 241, 241, 0.8);
}

.selectd-right-item_line:last-child {
  border: 0;
}

.selectd-right-item {
  margin-bottom: 10rpx;
}

.selectd-right-item-body {
  width: 100%;
  height: 160rpx;
  border-radius: 0 16rpx 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15rpx 0;
  /* border-bottom:  2rpx solid rgba(241,241,241,0.8); */
}

.selectd-right-item-body:last-child {
  border: 0;
}

.selectd-right-item-imgs {
  flex-shrink: 0;
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.selectd-right-item-imgs:empty {
  display: none;
  margin: 0;
}

.selectd-right-item-imgs image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8rpx 8rpx !important;
  overflow: hidden;
}

.selectd-right-item_content {
  height: 100%;
  display: flex;
  flex: 1;
  background: #fff;
  padding: 0 24rpx;
  flex-direction: column;
  justify-content: space-between;
}

.selectd-right-item__upper {

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.selectd-right-item__title {
  display: -webkit-box;
  font-size: 26rpx;
  color: #333;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

.selectd-right-item__tag {
  width: 90rpx;
  color: #FF6F40;
  background: transparent;
  font-size: 20rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  border: 1rpx solid #FF6F40;
  padding: 0 8rpx;
  border-radius: 4rpx;
  line-height: 30rpx;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
  text-align: center;
}

.selectd-right-item__down {
  display: flex;
  justify-content: space-between;
  color: #EA5F5F;
  font-size: 28rpx;
}

.selectd-right-item__down>view:last-child {
  display: flex;
  align-items: center;
}

.selectd-right-item__down text {
  font-size: 32rpx;
  font-weight: bold;
}

.selectd-right-item__down .selectd-right-item__down_icon {
  width: 52rpx;
  height: 52rpx;
  background: #32B499;
  border-radius: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 5rpx;
}

.container-btn {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: calc(98rpx + env(safe-area-inset-bottom));
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #fff;
}

.container-btn>view {
  width: 654rpx;
  height: 92rpx;
  display: flex;
  font-size: 28rpx;
  border-radius: 46rpx 46rpx;
}

.contact-us {
  width: 100rpx;
  height: 92rpx;
  font-size: 20rpx;
  border-radius: 46rpx 0 0 46rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #32B499;
}

.price-sum {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: #333333;
  font-size: 20rpx;
}

.price-sum .btn-logo {
  /* position: relative;
  left: -60rpx;
  bottom: 18rpx; */
  position: absolute;
  left: 20rpx;
  bottom: 0;
}


.btn-logo .badge {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

.price-sum .btn-logo image {
  width: 144rpx;
  height: 128rpx;
  display: block;
}

.total-price>text {
  font-size: 34rpx;
}

.price-sum_content .narration>text:first-child {
  margin-right: 10rpx;
}

.go-settlement {
  width: 150rpx;
  line-height: 92rpx;
  text-align: center;
  border-radius: 0 46rpx 46rpx 0;
  background-color: #666666;
}

.btnColor {
  background-color: #32B499 !important;
}

/* .wrap {
  height: 100vh;
  overflow: hidden;
} */

.t-popup--bottom {
  border-radius: 32rpx 32rpx 0 0 !important;
}

.popup-block {
  width: 100vw;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0 !important;
  position: relative;
  padding-bottom: 80rpx;
}

.popup-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24rpx 24rpx 0;
}

.popup-section {
  padding: 0 24rpx;
}

.popup-section_img {
  display: flex;
  align-items: flex-end;
}

.popup-section_img>view:first-child {
  width: 128rpx;
  height: 128rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin-right: 20rpx;
}

.popup-section_img image {
  width: 100%;
  height: 100%;
  display: block;
}

.popup-section_info {
  height: 128rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.popup-section_img_price {
  color: #EA5F5F;
  font-size: 28rpx;
}

.popup-section_img_price text {
  font-size: 48rpx;
  font-weight: bold;
}

.popup-section_specs {
  width: 100%;
  margin-top: 30rpx;
}

.popup-section_specs_title {
  font-size: 28rpx;
  color: #333333;
}

.t-row {
  margin-top: 24rpx;
}

.popup-section_specs_item {
  width: max-content;
  height: 56rpx;
  margin-right: 24rpx;
  background-clip: content-box;
  color: #666;
  font-size: 28rpx;
  line-height: 96rpx;
  margin-bottom: 32rpx;
  border-radius: 16rpx 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.noStock {
  color: #999;
}

.noStock>text {
  color: #EA5F5F;
  margin-left: 12rpx;
}

/* .t-col {
  padding: 0 !important;
  margin-left: 8px;
  margin-right: 8xp !important;
} */

.specs_actived {
  border: 2rpx solid #32B499;
  background-color: #fff;
}

.popup_container-btn {
  width: 100%;
  position: absolute;
  bottom: 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup_container-btn>view {
  width: 600rpx;
  height: 66rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 60rpx 60rpx;
  background-color: #32B499;
}

.popup-section_specs_number {
  display: flex;
  justify-content: flex-end;
  /* margin-bottom: 24rpx; */
  color: #333;
}

.popup-section_specs_number>view {
  display: flex;
  align-items: center;
}

.algorithm {
  width: 190rpx;
  height: 50rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 1rpx solid #999999;
  margin-left: 24rpx;
}

.algorithm>view {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.algorithm>view:first-child,
.algorithm>view:last-child {
  width: 50rpx;
}

.algorithm>view:nth-child(2) {
  flex: 1;
  border-left: 1rpx solid #999999;
  border-right: 1rpx solid #999999;
}

.popup_selected_product {
  width: 100vw;
  min-height: 600rpx;
  height: 800rpx;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  position: relative;
  padding: 0 24rpx;
  overflow: auto;
}

.popup_selected_product .product-header {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
}

.product-header .hader-delete {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666666;
}

.popup_selected_product-header .hader-delete>text {
  margin-left: 5rpx;
}

.product-section {
  height: 600rpx;
  overflow: scroll;
  padding: 24prx 0 30rpx;
  box-sizing: border-box;
}

.product-section::-webkit-scrollbar {
  width: 0;
}

.product-section-item {
  border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
}

.popup_selected-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.popup_selected-btn .container-btn {
  position: none !important;
  bottom: calc(env(safe-area-inset-bottom));
}

.no-goods {
  width: 100%;
  padding-top: 21vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #999999;
  font-size: 24rpx;
}
</style>